import React, { useEffect } from 'react';
import styles from './index.less';
import { TIME_ENUM, generateNum, completeArr } from './helper';
import { Tooltip } from 'antd';
import { useSetState } from 'ahooks';
import _ from 'lodash';
/**
 *@param {array} dataSource  传入的表格数据数组
 *@param {boolean} visable  传入的表格数据数组
 *@param {object} presentData 当前行数据
 *@param {func} changeResultFn 当前行数据 [0,0]
 */
export default function TimeQuanTum({
  visable = false,
  dataSource = [],
  presentData = {},
  changeResultFn,
  children,
}) {
  const [state, setState] = useSetState({
    select: [], //选中颜色
    timeToolData: completeArr(),
    selectBrr: [],
  });
  useEffect(() => {
    if (!visable) {
      setState({ selectBrr: [] });
    } else {
      computeCheck();
    }
  }, [visable]);
  useEffect(() => {
    computeCheck();
  }, [JSON.stringify(dataSource)]);
  const computeCheck = () => {
    let timeToolData = [...state.timeToolData];
    let brr = [];
    _.map(dataSource || [], (val) => {
      let data = generateNum(String(val?.startTime) || '', String(val?.endTime) || '');
      brr = [...brr, ...data];
    });
    brr = Array.from(new Set(brr));
    let nowData = generateNum(String(presentData.startTime), String(presentData.endTime));

    timeToolData = timeToolData.map((val) => {
      return { ...val, unCheck: brr.includes(val.id) && !nowData.includes(val.id) };
    });
    setState({ timeToolData, select: nowData });
  };
  const changeDropFn = (val, e, item) => {
    e.stopPropagation();
    let brr = [...state.selectBrr];
    if (val.unCheck) return;
    if (val.id < brr[0]) {
      return;
    } else if (brr.length >= 1) {
      let resultArr = state.timeToolData.slice(brr[0], val.id);
      if (resultArr.find((bal) => bal?.unCheck)) {
        return;
      }
    }
    brr.push(val.id);
    if (brr.length === 2) {
      changeResultFn && changeResultFn(brr, item);
      let data = generateNum(String(brr[0]) || '', String(brr[1]) || '');
      setState({ select: data });
      return;
    }
    setState({ select: brr, selectBrr: brr });
  };
  const contentDropdown = (item) => {
    const dataTimes = TIME_ENUM();
    return (
      <div className={styles.DropdownBox}>
        {_.map(state.timeToolData, (val, index) => {
          return (
            <Tooltip title={dataTimes[index]} key={index} destroyTooltipOnHide={true}>
              <div
                key={index}
                className={[
                  val.showTitle ? styles.DropDiv : styles.SecondDrop,
                  val?.unCheck || '' ? styles.disableDiv : null,
                  state.select.includes(index) ? styles.selectDiv : null,
                ].join(' ')}
                onClick={(e) => changeDropFn(val, e, item)}
              >
                <div />
                <div>{val.showTitle && val.title}</div>
              </div>
            </Tooltip>
          );
        })}
      </div>
    );
  };
  return (
    <Tooltip
      overlayClassName={styles.toolTipBox}
      visible={visable}
      trigger={'click'}
      placement={'bottom'}
      color={'white'}
      destroyTooltipOnHide={true}
      getPopupContainer={(triggerNode) => triggerNode.parentNode}
      title={contentDropdown(presentData)}
    >
      {children}
    </Tooltip>
  );
}
